import { ReloadOutlined } from '@ant-design/icons';
import { Card, Table } from 'antd';
import React, { useState } from 'react';
import ColumnsFilter from '../../../ColumnsFilter';
import styles from './index.less';

function BasicTable(props: any) {
  const {
    listData,
    loading,
    current,
    handleChangePage,
    setCheckedIds,
    colums,
    toolBar = [],
    isPaging,
    optional,
    reload,
  } = props;

  const [tableColums, setTableColumns] = useState(colums);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const paginationProps: any = {
    current,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ['10', '20', '50', '100', '10000'],
    showTotal: (total: number) => `总共有 ${total} 条`,
    total: listData?.total,
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: (selected: any) => {
      setSelectedRowKeys(selected);
      setCheckedIds(selected);
      // setCheckedLists(selected);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.this_year_is_lock === 1,
    }),
  };

  const options = colums.map((item: any) => item.title);

  return (
    <Card bordered={false} className={styles['table-card']}>
      <div style={{ marginBottom: 5, marginTop: 10, float: 'right' }}>
        <ReloadOutlined onClick={reload} className={styles['table-refresh']} />
        <ColumnsFilter
          setTableColumns={setTableColumns}
          options={options}
          columns={colums}
          style={{ marginRight: '10px' }}
          type="icon"
        />
        {toolBar.map((item: any) =>
          React.cloneElement(
            item,
            { key: item.index, className: styles.toolButton },
            item.props.children,
          ),
        )}
      </div>
      <Table
        bordered
        loading={loading}
        dataSource={listData?.data}
        columns={tableColums}
        pagination={isPaging ? paginationProps : false}
        scroll={{ x: 500, y: 600 }}
        onChange={handleChangePage}
        rowSelection={optional ? rowSelection : undefined}
        rowKey="id"
      />
    </Card>
  );
}
export default BasicTable;
